import { EditOutlined, EllipsisOutlined, SettingOutlined, PlusOutlined } from '@ant-design/icons';
import { Avatar, Card, Button, Row, Col, Tag, message } from 'antd';
import React from 'react';
import style from "./index.module.css"
import { post } from "../../util/post"
const { Meta } = Card;

const FoodItem = (props) => {
  const { data: { defaultImg, name, status, price, description, id, shopId },storeStatus } = props
  const token = localStorage.getItem('TOKEN')
  const addCart = async (id, shopId) => {
    if(storeStatus===0){
      message.info('对不起，店铺打烊了~')
    }else{
      const res = await post('/product/cartitem/add', { shopId: shopId, productId: id }, token)
      //  console.log(res);
      if (res.data.code === 0) {
        message.success('加入成功')
      } else message.error(res.data.msg)
    }
   
  }
  return (
    <Card
      style={{
        width: 300,
        height: 500,
        maxHeight: 500,
        margin:'auto',
        border:'5px solid #ebedf0',
        borderRadius:'5px'
      }}
      cover={
        <img
          height={250}
          width = {250}
          alt="food"
          src={defaultImg}
        />
      }

    >
      <Meta title={
        <Row>
          <Col span={12}>
            {name}
          </Col>
          <Col>
            {
              status === 1 ? <Tag className={style.tag} color="#4de900">出售中</Tag> : <Tag className={style.tag} color="#fbb62e">暂未出售</Tag>
            }
          </Col>
          <Col>
          <Button type="primary" disabled={status === 0} className={style.button} onClick={() => addCart(id, shopId,status)} shape="circle" icon={<PlusOutlined />} />
          </Col>
        </Row>
      } description={
          <Row>
              <div className={style.price}>
                <span>价格：</span>
                <span>¥{price}</span>
              </div>
              <span>{description}</span>
          </Row>
      } />
    </Card>
  )
};

export default FoodItem;